<template>
  <div>
    <div class="top">
      <span class="top-title" v-text="disabledStatus ? '以下参数不完整,请修改后重新上传' : '数据完全正确!'"></span>
      <span class="tip-text">上传规则说明
        <Poptip placement='bottom' title="规则说明">
          <img class="tips-icon" src="@/assets/icons/tishi.png" alt="">
          <div style="width:300px;white-space:normal;" slot="content">
            <p>1.学生姓名、老师姓名、<span style="color:rgba(213,130,66,1);">学生备注名（非必填）、老师备注名（非必填）</span>、班级分类名称、班级名称、教室名称均最多输入10个字符</p>
            <p>2.手机号码默认只能输入11位数字</p>
            <p>3.性别默认选择：男/女</p>
            <p style="color:rgba(213,130,66,1);">4.生日默认填写：年 月 日（非必填）</p>
            <p>5.学生类型选择：试课学生/正式学生</p>
            <p>6.老师身份选择：老师/管理员/管理员+老师</p>
            <p>7.费用展示：默认保留小数点后两位</p>
            <p>8.人数、课时数默认只能填写大于等于0的整数</p>
            <p>9.老师地址：省市区（重庆市-重庆市-渝北区）</p>
            <p style="color:rgba(213,130,66,1);">10.教室地址：最多输入30个字（非必填）</p>
            <p style="color:rgba(213,130,66,1);">11.备注字段：暂时不作为上传字段</p>
            <p style="color:rgba(213,130,66,1);margin-top:10px;">注：以上“非必填”项字段已标注，其余均是必填项</p>
          </div>
        </Poptip>
      </span>
    </div>
    <div v-if='data'>
      <p>
        <span>学生数据：</span>
        <span>成功检测到<span v-text="data.student.count"></span>条数据</span>
        <Poptip v-if='data.student.errors.length > 0' placement='bottom' title="学生错误">
          <span>发现<span style='color:red;' v-text="data.student.errors.length"></span>条错误数据</span>
          <div style="width:300px;white-space:normal;" slot="content">
            <p v-for="(item, i) in data.student.errors " :key="i" v-text="item"></p>
          </div>
        </Poptip>
      </p>
      <p>
        <span>老师数据：</span>
        <span>成功检测到<span v-text="data.teacher.count"></span>条数据</span>
        <Poptip v-if='data.teacher.errors.length > 0' placement='bottom' title="老师错误">
          <span>发现<span style='color:red;' v-text="data.teacher.errors.length"></span>条错误数据</span>
          <div style="width:300px;white-space:normal;" slot="content">
            <p v-for="(item, i) in data.teacher.errors " :key="i" v-text="item"></p>
          </div>
        </Poptip>
      </p>
      <p>
        <span>班级数据：</span>
        <span>成功检测到<span v-text="data.group.count"></span>条数据</span>
        <Poptip v-if='data.group.errors.length > 0' placement='bottom' title="班级错误">
          <span>发现<span style='color:red;' v-text="data.group.errors.length"></span>条错误数据</span>
          <div slot="content">
            <p v-for="(item, i) in data.group.errors " :key="i" v-text="item"></p>
          </div>
        </Poptip>
      </p>
      <p>
        <span>教室数据：</span>
        <span>成功检测到<span v-text="data.classRoom.count"></span>条数据</span>
        <Poptip v-if='data.classRoom.errors.length > 0' placement='bottom' title="教室错误">
          <span>发现<span style='color:red;' v-text="data.classRoom.errors.length"></span>条错误数据</span>
          <div style="width:300px;white-space:normal;" slot="content">
            <p v-for="(item, i) in data.classRoom.errors " :key="i" v-text="item"></p>
          </div>
        </Poptip>
      </p>
      <p>
        <span>学生分班数据：</span>
        <span>成功检测到<span v-text="data.studentGroup.count"></span>条数据</span>
        <Poptip v-if='data.studentGroup.errors.length > 0' placement='bottom' title="学生分班错误">
          <span>发现<span style='color:red;' v-text="data.studentGroup.errors.length"></span>条错误数据</span>
          <div  style="width:300px;white-space:normal;" slot="content">
            <p v-for="(item, i) in data.studentGroup.errors " :key="i" v-text="item"></p>
          </div>
        </Poptip>
      </p>
      <p v-if="disabledStatus">
        <span style="color:red;">导入发生严重错误不能继续操作!请仔细核对错误信息与模板</span>
      </p>
    </div>
    <div class="item">
      <div class="item-left">
        <Button @click="$emit('previous')" type="success">重新上传</Button>
      </div>
      <div class="item-right">
        <Button :disabled="disabledStatus" @click="writeData" type="success">立即导入</Button>
      </div>
    </div>
  </div>
</template>
<style scoped>
.top{
  display: flex;
  height: 21px;
  align-items: flex-end;
  margin: 30px 0px;
}
.top-title{
  font-size: 19px;
  color:black;
  margin-right: 15px;
}
.tip-text{
  line-height: 21px;
  height: 21px;
  font-size: 12px;
  display: flex;
  align-items: center;
}
.tips-icon{
  width: 14px;
  height: 14px;
}
.item{
  width: 100%;
  display: flex;
  margin-top: 50px;
}
.item-left,.item-right{
  display: flex;
  width: 50%;
  align-items: center;
}
.item-right{
  cursor: pointer;
  width: 30%;
  justify-content: flex-end;
}
</style>
<script>
export default {
  name: 'step-one',
  props: {
    validatorCode: {
      type: Number,
      default: 200
    },
    data: {
      type: Object,
      default: null
    }
  },
  computed: {
    disabledStatus () {
      const { data } = this
      if (data) {
        console.log(data)
        if (data.status === 'FAULT') {
          return true
        }
      }
      return false
    }
  },
  methods: {
    writeData () {
      this.loadingStatus = true
      this.$emit('write-data')
    }
  }
}
</script>
